<template>
	<view class="container">
		<!-- 合同标题 -->
		<view class="header">
			<text class="contract-title">购销合同</text>
		</view>

		<!-- 合同内容 -->
		<view class="contract-content">
			<!-- 合同编号 -->
			<view class="contract-item">
				<text class="label">合同编号：</text>
				<text class="value">{{ contractData.contractId }}</text>
			</view>

			<!-- 合同正文 -->
			<view class="contract-body">
				<text>{{ contractData.contractDetails }}</text>
			</view>

			<!-- 甲方签字 -->
			<view class="signature-section">
				<text class="label">甲方签字：</text>
				<text class="signature">{{ contractData.createBy }}</text>
			</view>

			<!-- 乙方签字 -->
			<view class="signature-section">
				<text class="label">乙方签字：</text>
				<text class="signature">{{ contractData.yi }}</text>
			</view>

			<!-- 底部工具栏 -->
			<up-tabbar activeColor="#6bc493">
				<up-tabbar-item text="首页" icon="/static/shou.png"
					@click="navigateTo('/pages/index/index')"></up-tabbar-item>
				<u-button @click="signContract(contractData.contractId)" class="custom-button">确定签署</u-button>
			</up-tabbar>
		</view>

		<!-- 签署成功弹窗 -->
		<u-popup mode="center" :show="showPopup" @close="closePopup">
			<view class="popup-content">
				<text class="popup-message">恭喜签署成功！</text>
				<u-button @click="closePopupAndReturn">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		sgin
	} from '@/common/api.js';
	// 定义响应式变量 contractData 来存储合同数据
	const contractData = ref({
		contractId: '',
		title: '购销合同',
		partyA: '土地有限公司', // 甲方名字固定
		partyB: '',
		contractDetails: `本合同由甲方（某某电子有限公司）与乙方（某某商贸公司）签订，主要内容包括：产品购销条款、交货日期、付款方式等详细信息。

条款 1：甲方需按乙方要求提供符合规格的产品。
条款 2：交货日期为 2024 年 12 月 31 日。
条款 3：付款方式为签订合同后 30 天内付款。

其他条款：本合同由双方代表签字后生效，合同生效期为 1 年，合同中如有未尽事宜，可由双方友好协商解决。
`,
		createBy: '某某电子有限公司', // 甲方签字人固定
		yi: '' // 乙方签字人
	});

	// 定义响应式变量来控制弹窗的显示状态
	const showPopup = ref(false);

	// 在页面加载时获取传递的参数
	onMounted(() => {
		// 获取当前页面栈
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1]; // 获取当前页面实例

		// 检查页面是否有参数传递
		if (currentPage && currentPage.options) {
			contractData.value = JSON.parse(decodeURIComponent(currentPage.options.sign));
			// currentPage.options.sign;  // 新增对签名的接收
			console.log('获取到的合同信息:', contractData.value);
		} else {
			console.log('没有上一页或未接收到参数');
		}
	});

	// 签署合同
	const signContract = (item) => {
		// 仅签署乙方，将乙方的名字填入签字
		contractData.value.yi = contractData.value.partyB || '乙方代表';
         console.log(item);
		 const params = {
			 contractId:item,
			 signatureStatus:"已签署",
		 }
		 sgin(params).then(res => {
			 if(res.code ==200){
				 // 显示签署成功的弹窗
				 showPopup.value = true;
			 }
		 })

	};

	// 关闭弹窗并返回首页
	const closePopupAndReturn = () => {
		showPopup.value = false;
		navigateTo('/pages/index/index');
	};

	// 关闭弹窗
	const closePopup = () => {
		showPopup.value = false;
	};

	// 页面跳转函数
	const navigateTo = (url) => {
		wx.redirectTo({
			url,
			fail: (err) => {
				console.error('Failed to navigate:', err);
			},
		});
	};
</script>

<style scoped>
	.container {
		padding: 10px;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		justify-content: flex-start;
	}

	.header {
		text-align: center;
		margin-bottom: 10px;
	}

	.contract-title {
		font-size: 22px;
		font-weight: bold;
	}

	.contract-content {
		background-color: #ffffff;
		padding: 15px;
		border-radius: 8px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
		margin-bottom: 10px;
	}

	.contract-item {
		margin-bottom: 8px;
	}

	.label {
		font-weight: bold;
		color: #333;
		margin-right: 5px;
	}

	.value {
		color: #555;
		font-size: 16px;
	}

	.contract-body {
		margin-top: 10px;
		color: #333;
		font-size: 14px;
		line-height: 1.5;
		white-space: pre-wrap;
		margin-bottom: 10px;
	}

	.signature-section {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.signature {
		font-size: 16px;
		font-weight: bold;
		color: #007bff;
		margin-left: 5px;
	}

	.popup-content {
		padding: 20px;
		text-align: center;
	}

	.popup-message {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	/* 自定义按钮样式 */
	.custom-button {
		background-color: #4a94de;
		/* 设置背景色为蓝色 */
		color: #ffffff;
		/* 设置字体颜色为白色 */
		font-size: 18px;
		/* 设置字体大小 */
		padding: 12px 24px;
		/* 内边距，控制按钮大小 */
		border-radius: 30px;
		/* 设置圆角，使按钮更柔和 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		/* 为按钮添加阴影效果 */
		border: none;
		/* 去掉默认的边框 */
		/* 	  width: 170px; */
		margin-top: 5px;
		margin-right: 5px;
	}

	/* 设置按钮的悬停效果 */
	.custom-button:hover {
		background-color: #3d7bb9;
		/* 改变悬停时的背景色 */
	}
</style>